<template>
    <div class="partner">
        <div class="partner_header">
        <LoginHeader class="common_header">
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">素士客服</span>
        <span slot="more"></span>
        </LoginHeader>
        <LoginHeader class="consult" v-show="show">
       <i class="el-icon-close" slot="i" @click="disappear"></i>
        <span slot="title">素士Soocas</span>
        <span slot="more" v-if="star" @click="starshow" class="kuang">人工客服</span>
        <i slot="more" class="el-icon-star-on kuang" v-else @click="starshow">评价</i>
        </LoginHeader>
        </div>
        <div class="partner_main">
            <div  v-for="(item,index) in infoarr" :key="index" :class="{'left':item.flag==='other','right':item.flag==='user'}">
        <span class="three">{{item.value}}</span>
        <img src="@/assets/njrpic/servicepic.png" v-if="item.flag=='other'" alt="">
        <img src="@/assets/njrpic/xiaomi.png" v-else-if="item.flag=='user'" alt="">
        <img src="@/assets/njrpic/serviceperson.png" v-else alt="">
        </div>
        </div>
        <div class="partner_bottom" v-if="star">
            <div><span @click="pusharr">自动排障</span></div>
            <input type="text" v-model="inputcontent" @keypress.enter="sendinfo" placeholder="输入消息..">
            <el-button type="success" @click="sendinfo" :disabled="inputcontent==''">发送</el-button>
        </div>
         <div class="partner_bottom" v-else>
            <input type="text" v-model="inputcontent" @keypress.enter="sendinfo" placeholder="输入消息..">
            <el-button type="success" @click="sendinfo" :disabled="inputcontent==''">发送</el-button>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            inputcontent:'',
            infoarr:[
                {value:'您好！我是机器人小素，请问有什么可以帮助您？',flag:'other'},
                {value:'常见问题',flag:'other'}

            ],
            nowtime:'15:37',
            cansend:true,
            star:true,
            show:true
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        sendinfo(){
            if(this.inputcontent!==''){
                this.infoarr.push({value:this.inputcontent,flag:'user'})
                this.inputcontent=''
            }
        },
        starshow(){
            this.star=!this.star;
            this.infoarr.push({value:'您好，有什么可以帮助您的吗？',flag:'other'})
        },
        pusharr(){
            this.infoarr.push({value:'自助排障？',flag:'user'})
            this.infoarr.push( {value:'您好！我是机器人小素，请问有什么可以帮助您？',flag:'other'},
                {value:'常见问题',flag:'other'})
        },
        disappear(){
            this.show=false
        }
    },
    mounted(){
        let time=new Date();
        this.nowtime=(time.getHours()+ '').padStart(2, '0')+':'+(time.getMinutes() + '').padStart(2, '0')
    },
    updated(){
        // 聊天定位到底部
          let ele = document.getElementsByClassName('partner_main')[0];
          ele.scrollTop = ele.scrollHeight;
      },
}
</script>
<style lang="less" scoped>
.partner{
.consult{
    margin: 0;
    padding: 20px;
    background-color:#47bd89;
    >div{
        display: flex;
        align-items: center;
    }
    span,i{
        color: white;
    }
    .kuang{
        border: 1px solid white;
        padding: 5px;
    }
}
.partner_header{
    width: 100%;
    .common_header{
        margin: 0;
        padding: 25px;
        background-color: white;
    }
}
.partner_bottom{
    background-color: #f6f6f6;
    border-top: 2px solid #dfdfdf;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 25px;
    input{
        width: 70%;
        height: 70px;
        border-radius: 35px;
        margin-right: 5%;
        outline: 0;
        padding-left: 15px;
        border: 1px solid #dee5e7;
    }
    .el-button{
        border-radius: 30px;
    }
    >div>span{
        background-color: white;
        padding: 15px;
        border:1px solid #88d5b2;
        border-radius: 30px;
        line-height: 100px;
    }
}
 ::-webkit-scrollbar{
    display: none
}
.partner_main{
   ::-webkit-scrollbar{
    display: none
}
    >span{
        color: #b8b8b8;
        position: relative;
        left: 50%;
    }
    padding: 25px;
      overflow-y: scroll;
      height: 1000px;
    background-color: #ededed;
    .right{
        text-align: right;
    display: flex;
    justify-content: flex-end;
    padding: 15px;
        >span{
        background-color: #96ee62;
        padding: 7px;
        display: inline-block;
        border-radius: 5px;
        position: relative;
        margin-right:10px ;
        font-size:12px;
        }
         >img{
           width: 10%;
        border-radius: 5px;
        }
    }
   .right .three:after{
           content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 15px;
    right: -25px;
    border: solid 15px;
    border-color: transparent transparent transparent #96ee62;
    font-size: 0;
        }
   .left{
    padding: 7px;
        >span{
        background-color: white;
        padding: 15px;
        display: inline-block;
        border-radius: 5px;
        position: relative;
        font-size:12px;
        width: 70%;
        }
         >img{
             float: left;
           width: 10%;
        border-radius: 5px;
        margin-right:10px ;
        }
    } 
     .left .three:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 9px;
    left: -25px;
    border: solid 15px;
    border-color: transparent white transparent transparent;
    font-size: 0;
        }
}
}

</style>